<template>
	<view>
		<view class="kind-main" v-for="item in kindList" :key="item.id">
			
		
		<view class="idea" @tap=goKind(item.id)>
			<view class="title">
				{{item.name}}
			</view>
			<image :src="item.icon" mode=""></image>
			</view>
		</view>
		
	</view>
</template>

<script>
	import {categorys} from "../../utils/home/index.js"
	export default {
		data() {
			return {
				
				kindList:[]
			}
		},
		methods: {
			goKind(id){
				uni.navigateTo({
					url:"/pages/kind/categorys/categorys?id="+id
				})
			}
		},
		onLoad(){
			categorys("1308336521604599809").then(res => {
			
				// console.log(res.data.category.children[0])
				
				this.kindList=res.data.category.children
			
			})
		}
	}
</script>

<style scoped lang="scss">
	.kind-main:nth-child(1),.kind-main:nth-child(2){
				width: 670rpx;
			    height: 302rpx;
				margin: 0 auto;
			   
				.idea{
					width: 100%;
					height: 100%;
					background: #d5d5d5;
					box-shadow: 0 24rpx 40rpx 0 rgba(83,66,49,.05);
					border-radius: 40rpx;
					margin: 56rpx auto;
					display: flex;
					justify-content: space-between;
					align-items: center;
					image{
						width: 60%;
						height: 100%;
					}
					.title{
						margin-left: 52rpx;
						    font-size: 48rpx;
						    color: #3e3e3e;
						
					}
				}
	}
	.kind-main:nth-child(3),.kind-main:nth-child(4){
				margin-top: 48rpx;
				
				.idea{
					margin: 0 auto;
					float: left;
					width: 312rpx;
					height: 442rpx;
					background: #fafafa;
					box-shadow: 0 24rpx 40rpx 0 rgba(83,66,49,.03);
					border-radius: 40rpx;
					position: relative;
					margin-left: 40rpx;
					margin-bottom: 48rpx;
					image{
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
					}
					.title{
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
						font-size: 48rpx;
						color: #3e3e3e;
						z-index: 2;
					}
				}
				
	}

</style>
